<template>
	<div>
		<div class="date" @click="open">
			<span class="date1">{{ newDateList[0] }}</span
			>-<span class="date2">{{ newDateList[1] }}</span>
		</div>
		<div class="btn">
			<van-button style="flex:1" size="small" @click="fastChangeTimes('sy')" type="info"
				>上月</van-button
			>
			<van-button style="flex:1" size="small" @click="fastChangeTimes('by')" type="info"
				>本月</van-button
			>
			<van-button style="flex:1" size="small" @click="fastChangeTimes('bz')" type="info"
				>本周</van-button
			>
			<van-button style="flex:1" size="small" @click="fastChangeTimes('zt')" type="info"
				>昨天</van-button
			>
		</div>
		<van-popup v-model="show" position="bottom" :style="{ width: '100%', height: '80%' }">
			<div class="container">
				<div class="header">
					<van-button @click="close" size="small">取消</van-button>
					<van-button @click="checkTimeList" type="info" size="small">确认</van-button>
				</div>

				<van-tabs v-model="active">
					<van-tab title="开始时间" name="1">
						<vanDatetimePicker
							:show-toolbar="false"
							v-model="dateList[0]"
							type="date"
						></vanDatetimePicker>
					</van-tab>
					<van-tab title="结束时间" name="2">
						<vanDatetimePicker
							:show-toolbar="false"
							:min-date="dateList[0]"
							v-model="dateList[1]"
							type="date"
						>
						</vanDatetimePicker>
					</van-tab>
				</van-tabs>
			</div>
		</van-popup>
	</div>
</template>
<script>
import dayjs from "dayjs";
import { Popup, Button, Tab, Tabs, DatetimePicker } from "vant";
export default {
	components: {
		vanPopup: Popup,
		vanButton: Button,
		vanTab: Tab,
		vanTabs: Tabs,
		vanDatetimePicker: DatetimePicker
	},
	data() {
		return {
			dateList: [],
			show: false,
			active: 1,
			newDateList: []
		};
	},
	props: {
		listDate: { type: Array, default: () => [] }
	},
	watch: {
		listDate: {
			handler(newVal) {
				this.setData(newVal);
			},
			immediate: true // 立即执行一次 handler
		}
	},
	created() {},
	methods: {
		open() {
			this.show = true;
			this.active = 1;
			this.setData(this.listDate);
		},
		setData(data) {
			// 当没有传入时间的时候，默认为当天
			if (data.length == 0) {
				const today = new Date();
				this.dateList = [today, today];
				this.newDateList = [
					dayjs(today).format("YYYY-MM-DD"),
					dayjs(today).format("YYYY-MM-DD")
				];
			} else {
				this.dateList = [dayjs(data[0]).toDate(), dayjs(data[1]).toDate()];
				this.newDateList = [
					dayjs(data[0]).format("YYYY-MM-DD"),
					dayjs(data[1]).format("YYYY-MM-DD")
				];
			}
		},
		close() {
			this.show = false;
		},
		checkTimeList() {
			this.$nextTick(() => {
				const startDate = dayjs(this.dateList[0]);
				const endDate = dayjs(this.dateList[1]);
				// 如果开始时间大于结束时间，则将结束时间设置为开始时间
				const isValid = startDate.isBefore(endDate) || startDate.isSame(endDate);
				const formattedStartDate = startDate.format("YYYY-MM-DD");
				const formattedEndDate = isValid
					? endDate.format("YYYY-MM-DD")
					: formattedStartDate;
				this.newDateList = [formattedStartDate, formattedEndDate];
				this.$emit("checkTimeList", this.newDateList);
				this.show = false;
			});
		},
		toDate(dateStr) {
			return dayjs(dateStr).toDate();
		},
		fastChangeTimes(type) {
			let list = [];
			switch (type) {
				case "sy":
					list = this.$TOOL.lastMonthList();
					break;
				case "by":
					list = this.$TOOL.currentMonthRange();
					break;
				case "bz":
					list = this.$TOOL.currentWeekRange();
					break;
				case "zt":
					list = this.$TOOL.yesterdayRange();
					break;
				default:
					break;
			}
			this.dateList = [this.toDate(list[0]), this.toDate(list[1])];
			this.checkTimeList();
			// console.log(this.dateList, "dateList");
		}
	}
};
</script>
<style scoped lang="scss">
.btn {
	display: flex;
	justify-content: space-around;
	padding: 5px;
	gap: 5px; // 按钮之间的间距
}
.date {
	//width: 300px;
	flex: 1;
	height: 25px;
	padding: 2px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	span {
		line-height: 25px;
		text-align: center;
	}

	.date1 {
		width: 48%;
		height: 100%;
		border: 1px rgb(220, 223, 230), solid;
		border-radius: 5px;
		margin-right: 10px;
	}

	.date2 {
		width: 48%;
		height: 100%;
		border: 1px rgb(220, 223, 230), solid;
		margin-left: 10px;
		border-radius: 5px;
	}
}

.container {
	padding: 10px;

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
</style>
